<template>
	<view>
		<!-- 未激活设备 -->
		<view class="box4">
			<!-- <h3>{{$t('shebei.head.deviceManagement')}}</h3> -->
			<!-- 未激活设备 -->
			<view class="box5" v-for="(a,b) in FILs" :key="b">
				<view class="box6">
					<view class="quan">
					<image src="../../static/get/a.png" mode=""></image>
					<text>{{a.status}}</text>
					</view>
					<text class="k1"><text class="k2">{{a.title}}</text> {{a.titleMsg}}</text>
					<!-- <text class="k3">{{a.typeComp}}</text> -->
					<text class="k3">今日产出: {{a.today}} HNT</text>
				</view>
				<!-- 按钮 -->
				<view class="btn">
					<button class="btn1" @click="goFIL(b)">{{$t('shebei.head.manageDevice')}}</button>
					<button class="btn2" @click="activation(a,b)">{{$t('shebei.head.activateDevice')}}</button>
				</view>
			</view>
			<!-- 已激活设备 -->
			<view class="box5" v-for="(a,b) in HNTs" :key="b">
				<view class="box6">
					<view class="quan2">
					<image src="../../static/shebei/img.png" mode=""></image>
					<text >{{a.status}}</text>
					</view>
					<text class="k1"><text class="k2">{{a.title}}</text> </text>
					<!-- <text class="k3">{{a.typeComp}}</text> -->
					<text class="k3">今日产出: {{a.today}} HNT</text>
				</view>
				<!-- 按钮 -->
				<view class="btn">
					<button class="btn1" @click="goHNT(b)">{{$t('shebei.head.manageDevice')}}</button>
					<button class="btn2" @click="renew(a,b)">{{$t('shebei.head.renew')}}</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		data() {
			return {
				FILs:[
					{
							img:'../../static/computingPower/get.png',
							title:'KC-A',
							titleMsg:'FILEL盖亚10P',
							typeComp:'北极星满算力',
							status:'未激活',
							endWeek:'T+3',
							andWeek:1080,
							expenses:33,
							expect:100,
							price:168.22,
							danwei:'USDT',
							computing:100,
							today:513
						},
						{
								img:'../../static/computingPower/get.png',
								title:'KC-A',
								titleMsg:'FILEL盖亚10P',
								typeComp:'北极星满算力',
								status:'未激活',
								endWeek:'T+3',
								andWeek:1080,
								expenses:33,
								expect:100,
								price:168.22,
								danwei:'USDT',
								computing:100,
								today:513
							},
				],
				
					HNTs:[
						{
								img:'../../static/computingPower/get.png',
								title:'HNT',
								typeComp:'集群B端产品',
								status:'已激活',
								endWeek:'T+3',
								andWeek:1080,
								expenses:33,
								computing:100,
								price:168.22,
								danwei:'USDT',
								expect:100,
								today:513
							},
							{
									img:'../../static/computingPower/get.png',
									title:'HNT',
									typeComp:'集群B端产品',
									status:'已激活',
									endWeek:'T+3',
									andWeek:1080,
									expenses:33,
									computing:100,
									price:168.22,
									danwei:'USDT',
									expect:100,
									today:513
								},
					]
			}
		},
		methods: {
			activation(a,b){
				console.log(a,b);
			},
			renew(){
				//续费
				uni.navigateTo({
					url:'../renew/renew'
				})
			},
			goHNT(e){
				console.log(e);
				// 去HNT
				uni.navigateTo({
					url:'../myshebei-info/myshebei-info?list='+JSON.stringify(this.HNTs[e])
				})
			},
			goFIL(e){
				// 去FIL
				uni.navigateTo({
					url:'../myshebei-info/myshebei-info?list='+JSON.stringify(this.FILs[e])
				})
			}
		},
		created() {
			
		}
	}
</script>

<style>
.box4 {
		width: 94%;
		margin:0px auto;
		padding-top: 40rpx;
	}

	.box5 {
		margin: 20rpx 0;
		width: 100%;
		height: 300rpx;
		position: relative;
		box-shadow: 0 0 6rpx 6rpx rgba(0,0,0,.06);
		border-radius: 16rpx;
	}
	.box6{
		width: 100%;
		height: 200rpx;
	}
	.quan{
		width: 160rpx;
		height: 140rpx;
		background-color: #F8F8F8 ;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
		}
	.quan>image {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
	.quan>text{
		font-size: .7em;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #EBEBEB;
		opacity: .5;
	}
	.quan2{
		width: 160rpx;
		height: 140rpx;
		background-color: #F8F8F8 ;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
		}
	.quan2>image {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
	.quan2>text{
		font-size: .7em;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #D5EFD2;
		opacity: .5;
	}
	.k1{
		font-weight: 550;
		position: absolute;
		left: 220rpx;
		top: 40rpx;
		font-weight: bold;
		opacity: .7;
	}
	.k2{
		color: #007AFF;
		margin-right: 10rpx;
	}
	.k3{
		font-size: .7em;
		opacity: .5;
		position: absolute;
		left: 220rpx;
		top: 100rpx;
	}
	.btn{
		display: flex;
		float: right;
		margin-top: 20rpx;
	}
	.btn>button{
		/* float: right; */
		width: 160rpx;
		font-size: .8em;
		height: 60rpx;
		margin: 0 16rpx;
		line-height: 60rpx;
	}
	.btn1{
		color: #397CE7;
		background-color: #EBF1FD;
	}
	.btn2{
		color: white;
		background-color:#397CE7;
		
	}
</style>
